/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-03 11:32:32
 */
import { useRequest, useSearch } from '@/hooks'
import { ArticleModule } from '@/store/modules/articleData'
import { Modal, notification } from 'ant-design-vue'
import { clone, isNil, equals, isEmpty, head, last } from 'ramda'
import { computed, createVNode, defineComponent, PropType, toRaw } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { columns, rows } from './uilts'
import { useRouter } from 'vue-router'

enum DoType {
	draft = 'draft',
	publish = 'publish',
}
const props = {
	type: {
		type: String as PropType<string>,
		required: true,
	},
} as const
export default defineComponent({
	props,
	setup(props) {
		const userId = localStorage.getItem('userId') as string
		const router = useRouter()
		const articleCategory = computed(() => {
			return ArticleModule.articleCategory
		})
		const articleTag = computed(() => {
			return ArticleModule.articleTag
		})
		const { searchForm, expand, expandToggle } = useSearch<any>({})
		function search() {
			const params = clone(toRaw(searchForm.value))
			if (!isNil(params.category)) {
				params.category = articleCategory.value.find((item) => equals(item.value, params.category))?.label
			}
			if (!isNil(params.tags) && !isEmpty(params.tags)) {
				params.tags = articleTag.value.find((item) => equals(item.value, params.tags))?.label
			}
			if (!isNil(params.date) && !isEmpty(params.date)) {
				params.createTimeStart = head(params.date)
				params.createTimeEnd = last(params.date)
				delete params.date
			}
			params.status = equals(props.type, DoType.draft) ? 0 : 1
			run({
				...params,
				...getPagination(true),
				userId,
			})
		}

		function clear() {
			searchForm.value = {}
			search()
		}
		const { run, data, getPagination, renderPagination, loading } = useRequest(
			API.blog.article.getArticlePage.request,
			{
				manual: true,
				pagination: true,
				defaultParams: [
					{
						status: equals(props.type, DoType.draft) ? 0 : 1,
						userId,
					},
				],
			}
		)
		function delArticle(id: number) {
			Modal.confirm({
				title: () => '是否删除该文章?',
				icon: () => createVNode(ExclamationCircleOutlined),
				onOk: async () => {
					const { success } = await API.blog.article.deleteArticle.request({ id })
					if (success) {
						notification.success({
							message: '提示',
							description: '删除成功',
						})
						search()
					}
				},
			})
		}
		function actionRender({ record }: Rantion.RableSlotScope<any>) {
			return (
				<a-space size="middle">
					<a-button
						type="link"
						block
						onClick={() => {
							router.push(`/editor?id=${record.id}`)
						}}
					>
						编辑
					</a-button>
					<a-button type="link" block danger onClick={() => delArticle(record.id)}>
						删除
					</a-button>
				</a-space>
			)
		}
		function tableHeader() {
			return [
				<a-button type="primary">
					<router-link to={`/editor`} target="_blank">
						新增
					</router-link>
				</a-button>,
			]
		}
		return () => (
			<div>
				<div style={{ width: '100%' }}>
					<f-search
						labelCol={{ span: 6 }}
						wrapperCol={{ span: 18 }}
						loading={loading.value}
						clear={clear}
						search={search}
						expand={{
							value: expand.value,
							expandToggle,
						}}
						searchKey={`${props.type}SearchKey`}
						model={searchForm.value}
						rows={rows}
					/>
					<f-table
						v-slots={{ header: tableHeader, actionRender }}
						scroll={{ x: 2500 }}
						columns={columns}
						dataSource={data.value.data?.data}
						loading={loading.value}
						rowKey="id"
						tableKey={`${props.type}Article`}
					/>
					<div style="margin: 20px 0; text-align: center;">{renderPagination()}</div>
				</div>
			</div>
		)
	},
})
